<template>
	<view class="page">
      <view class="head-bg">
        <view class="bg">
			<image :src="bg" mode=""></image>
		</view>
      </view>
      <view class="login">
        <uni-forms :value="formData" ref="form">
          <uni-forms-item name="user">
            <uni-easyinput type="text" v-model="formData.user" placeholder="请输入姓名" />
          </uni-forms-item>
		  <uni-forms-item name="password">
		    <uni-easyinput type="text" v-model="formData.password" placeholder="请输入密码" />
		  </uni-forms-item>
          <button @click="submitForm" class="submit-btn">登录</button>
        </uni-forms>
	  </view>
      <view class="login-help">
        <text>忘记密码?</text>
        <text>无法登录?</text>
	  </view>
      <view class="bottom-login-type">
        <text class="title">一一  其他登录  一一</text>
        <view class="type">
          <view class="type-box weixin"></view>
          <view class="type-box qq"></view>
          <view class="type-box weibo"></view>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg: require('../../static/image/head-bg.png'),
				formData: {
					user: '',
					password: ''
				}
			}
		},
		methods: {
          submitForm (form) {
			this.$refs.form.submit()
			  .then((res) => {
			    this.login(res)
			  })
		  },
		  async login (e) {
			  const { data: res } = await this.$myHttp({
			  	url: 'login.php',
				data: e
			  })
			  if (res.code == 0) {
				  // 登录信息
				  let loginInfo = {
					User: e.user,
					Password: e.password,
					Token: res.Token
				  }
				  // 保存登录信息到本地储存
				  uni.setStorage({
				      key: 'Token',
				      data: loginInfo,
				  })
				  uni.showToast({
				    title: "登录成功",
				    icon: 'loading',
				    duration: 3000,
				    mask: true
				  })
				  // 跳转到首页
				  uni.switchTab({
				      url: '/pages/index/index'
				  })
			  }else if (res.code == 1) {
				  uni.showToast({
				    title: res.msg,
				    icon:'none',
				    duration: 2000
				  });
			  } else if(res.code == 2) {
				  uni.showToast({
				    title: res.msg,
				    icon:'none',
				    duration: 2000
				  });
			  }
		  }
		}
	}
</script>

<style scoped>
.head-bg{
  display: flex;
  width: 100%;
  height: 150px;
  flex-direction: column;
}
.head-bg .bg{
  width: 100%;
  height: 100%;
}
.head-bg .bg image{
  width: 100%;
  height: 100%;
}
.login{
  width: 90%;
  height: 100%;
  padding: 0 5%;
  margin-top: 80px;
}
.is-input-border[data-v-abe12412] {
  border-radius: 40px;
  height: 40px;
}
uni-button:after {
  border: 0;
}
.login .submit-btn{
  background: #dfe2e7;
  color: #fff;
  border-radius: 60px;
}
/* 底部登录类型 */
.bottom-login-type{
  width: 100%;
  position: absolute;
  bottom: 50px;
  left: 0;
  text-align: center;
  font-size: 8px;
  color: #c7c7c7;
}
.bottom-login-type .type{
  display: flex;
  width: 80%;
  padding: 0 10%;
  margin-top: 30px;
  justify-content: space-between;
}
.bottom-login-type .type-box{
  width: 44px;
  height: 44px;
}
.bottom-login-type .weixin{
	background-image: url('../../static/image/weixin.png');
	background-size: cover;
}
.bottom-login-type .qq{
	background-image: url('../../static/image/qq.png');
	background-size: cover;
}
.bottom-login-type .weibo{
	background-image: url('../../static/image/weibo.png');
	background-size: cover;
}
/* 登录帮助*/
.login-help{
  display: flex;
  justify-content: space-between;
  width: 88%;  padding: 0 6%;
  font-size: 10x;
  margin-top: 10px;
  color: #22a8e5;
}
/* star send*/
</style>
